<template>
    <a @click="changeValue" class="flexable v-center" style="color: #A9B7C6;text-decoration: none">
        <i class="fa-regular spacing mr-10" style="font-size: 125%" :class="{
            'fa-square': value === false,
            'fa-square-check': value === true,
            'fa-square-minus': value === undefined && nullable,
        }"/>
        <slot v-if="!label" />
        <template v-else>{{label}}</template>
    </a>
</template>
<script>
import {noop} from "@/utils/functions";
import $ from 'jquery';

const STATUS = [undefined, false, true];
export default {
    name: 'NullableCheckbox',
    props: {
        modelValue: Boolean,
        nullable: {type: Boolean, default: false},
        label: String
    },
    emits: ['update:modelValue', 'changed'],
    computed: {
        value: {
            get () { return this.modelValue; },
            set (value) {
                this.$emit ('update:modelValue', value);
                this.$emit ('changed', value);
            }
        },
    },
    data () {
        return {
            index: 0,
            uuid: Math.random ().toString (16).substring (2)
        }
    },
    methods: {
        noop,
        changeValue () {
            this.index = (this.index + 1) % STATUS.length;
            let status = STATUS [this.index];
            if (status === undefined && !this.nullable) {
                status = false;
                this.index ++;
            }
            this.value = status;
        }
    },
    mounted () {
        console.log ('nullable-checkbox loaded.')
        if (this.modelValue === undefined || this.modelValue === null) {
            this.index = 0;
            if (!this.nullable) {
                this.index = 1;
            }
        } else {
            this.index = STATUS.indexOf (this.modelValue);
        }
        this.value = STATUS [this.index];
    }
};
</script>